<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <script src="../js/vue.js"></script>
    <style>
        ul{
            height: 200px;
            border: 2px solid #8c8686;
            overflow: scroll;
        }
        ul li {
            height: 30px;
            line-height: 30px;
        }
    </style>
    <!-- <script src="../js/vue.min.js"></script> -->
    <script>
        // 关闭vue生产模式提示
        Vue.config.productionTip = false
    </script>
</head>
<body>
    <div id="app">
        <h3 tabindex="0" style="border:1px solid #ccc;width:200px;height:200px;">{{message}}</h3>
        <h1>{{message}}</h1>
        <b>年龄：{{ getAge() }}, 姓名：{{name}}</b>
        <h1>比如说这个就是考试界面</h1>
        <a v-bind:href="url" target="_blank" rel="noopener noreferrer">尚硅谷</a>
        <input type="text" v-model='url' style="width: 400px; font-size:28px" @blur="isBlur">
        <hr>
        Vue模板语法有2大类，插值语法和指令语法
        <b>简写方法</b>
        v-bind: ===> :      v-on: ===> @ 
        <hr>
        <ul>
            <li v-for="item in count" ::key="item">{{message}}</li>
        </ul>
    </div>

    <script>
        
        const vm = new Vue({
            mounted() {
                let dom = document.querySelector('ul');
                console.log(dom);
                dom.addEventListener('scroll', ()=>{
                    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
                    console.log("鼠标滚轴滚动了", dom.scrollHeight, dom.scrollTop, dom.clientHeight);
                    if (scrollDistance <= 0) {
                        alert("已经到底了，请重启加载数据");
                        this.count+=3;
                    }
                }, true)
            },
            // el:'#app',
            data(){
                return{
                    message:'你好，尚硅谷 --  模板语法',
                    url:'http://www.atguigu.com',
                    count:7,
                }
            },
            methods: {
                getAge(){
                    return 21
                },
                isBlur() {
                    console.log('失去了焦点');
                },
                myonblur() {
                    alert("失去焦点");
                },
                myonfocus() {
                    alert("得到焦点");
                }
            },
            computed:{
                name(){
                    return 'jake'
                }
            },
        }).$mount('#app')
    </script>

</body>
</html>